<template>
    <div class="navbar navbar-default">
        <div class="row">
            <div class="navbar-header col-md-4">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a :href="'/TestPaper/testPapers.html?cad='+claId" class="navbar-brand left">
                    <i class="fa fa-long-arrow-left"></i>
                    班级
                </a>
            </div>
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                <div class="col-md-4" v-if="user.isTeacher">
                    <ul class="nav navbar-nav nav-testpaper">
                        <li :class="{'active': action=='testPaper'}"><a :href="'/TestPaper/testPaper.html?qd='+tpId">编辑试卷</a></li>
                        <li :class="{'active': action=='analyze'}"><a :href="'/TestPaper/analyze.html?qd='+tpId">测试分析</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-md-offset" v-else>
                    <ul class="nav navbar-nav nav-testpaper">
                        <li :class="{'active': action=='testPaper'}"><a :href="'/TestPaper/testPaper.html?qd='+tpId">测试详情</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="##" data-toggle="dropdown" class="dropdown-toggle">
                                {{user.name}}<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li ><a href="/Account/setting.html"><span class="glyphicon glyphicon-user"></span> 个人设置</a></li>
                                <li ><a href="/index/logout"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import auth from '../../Component/Auth/auth.js';
    export default {
        props: ['action', 'claId'],
        data: function() {
            return {
                user: auth.getInfo(),
                tpId: location.search.slice(1).split('=')[1]
            }
        }
    }

</script>

<style>
body {
    overflow-x: hidden;
}
.nav-testpaper {
    width: 100%;
    display: block;
    font-size: 17px;
}
.nav-testpaper li {
    width: 50%;
    text-align: center;
}
</style>